<template>
    <div class="container">

      <a class="floatBtn" href="tel:‭189 5143 9012‬">
        <img style="width: 50px;height: 50px;" src="https://detan.gitee.io/images/phone.png"/>
      </a>

      <div class="nav">
        <mt-navbar v-model="active">
          <mt-tab-item v-for="(item,index) in kinds" :index="index" :key="index"
          :id="item.tabName"
          >
            {{item.tabName}}
          </mt-tab-item>
        </mt-navbar>
      </div>
      <div class="page-tab-container">
        <mt-tab-container class="page-tabbar-tab-container" swipeable v-model="active">
          <mt-tab-container-item :id="item.tabName"
                                 v-for="(item,index) in kinds"
                                 :index="index" :key="index"
          >
            <div class="page-lazyload-list">
              <div class="page-lazyload-listitem" v-for="item_ in item.data">
                <div style="position: relative;">
                  <img :preview="index" :preview-text="item.desc" v-lazy.container="rootDir+item_"  class="page-lazyload-image">
                  <div class="desc">
                    {{item.desc}}
                  </div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
</template>

<script>
  let rangeArray = (label,start, end) => Array(end - start + 1).fill(0).map((v, i) => {
    let i_ = i+start;
    if (i_<10){
      i_ = '0'+i_;
    }
    return label+ i_ + '.jpg';
  })
    export default {
        components: {},
        data() {
            return {
              rootDir : 'https://detan.gitee.io/images/tuoxieNormal/',
              active: '1~5',
              mianbao:16,
              shanhurong:14,
            }
        },
        computed:{
          other:function () {
            let pre = 'other/';
            let mianbao =  rangeArray(pre+'面包拖鞋_',1,this.mianbao);
            let shanhurong =  rangeArray(pre+'珊瑚绒拖鞋_',1,this.shanhurong);
            console.log('mianbao',mianbao)
            console.log('shanhurong',shanhurong)
            return [...mianbao,...shanhurong]
          },
          kinds:function () {
            return [
              {
                tabName:'1~5',
                desc:'220g毛巾符合0.4 海绵 白布条0.2拉毛内存托 30 * 11 * 5.5 加白原麻  400g纸板 三把上 加工工艺',
                data:[
                  '6J6A237900.jpg',
                  '6J6A238100.jpg',
                  '6J6A238200.jpg',
                  '6J6A238300.jpg',
                  '6J6A238400.jpg',
                ]
              },
              {
                tabName:'6~10',
                desc:'0.2 珊瑚绒 外邦 盖面 0.2拉毛内存托 布条色边 28.5✖11.5*6 原麻柳叶纹底  2mm  EVA 平面',
                data:[
                  '6J6A314000.jpg',
                  '6J6A314100.jpg',
                  '6J6A314200.jpg',
                  '6J6A314300.jpg',
                  '6J6A3148.JPG',
                ]
              },
              {
                tabName:'11~14 23~28',
                desc:'0.2 仿麻布 半邦 盖面 布条 色边 0.2 拉毛内衬  2mm EVA 平面 28.5 * 11.5 * 6 原麻柳叶纹 ',
                data:[
                  '6J6A512600.jpg',
                  '6J6A512700.jpg',
                  '6J6A512800.jpg',
                  '6J6A512900.jpg',
                  '6J6A9112.JPG',
                  '6J6A9116.JPG',
                  '6J6A9117.JPG',
                  '6J6A9121.JPG',
                  '6J6A9123.JPG',
                  '6J6A9124.JPG',
                ]
              },
              {
                tabName:'15~16',
                desc:'0.3 拉毛 外邦 盖面 无纺色包边条 400g 纸板 28*11*5压麻底 ',
                data:[
                  '6J6A9085.JPG',
                  '6J6A9087.JPG',
                ]
              },{
                tabName:'17~22',
                desc:'0.2 拉毛 邦子 盖面 300g 纸板内垫 无纺色包边条  27*10.5*3mm 压麻 ',
                data:[
                  '6J6A9094.JPG',
                  '6J6A9096.JPG',
                  '6J6A9097.JPG',
                  '6J6A9098.JPG',
                  '6J6A9099.JPG',
                  '6J6A9103.JPG',
                ]
              },
              {
                tabName:'29~31',
                desc:'0.25 真美布 外邦 盖面 400g纸板 0.2 拉毛内衬 28* 11 * 6 加白压麻镶底',
                data:[
                  '6J6A9129.JPG',
                  '6J6A9195.JPG',
                  '6J6A9197.JPG',
                ]
              },
              {
                tabName:'其他',
                data:this.other
              }
            ]
          }
        },
        watch: {},
        methods: {}
    }
</script>

<style>
    .container {
        padding: 10px;
    }
    .item {
      display: inline-block;
    }
    .nav {
      position: sticky;
      top:0;
      z-index:100;
    }
    .link {
      color: inherit;
      padding: 20px;
      display: block;
    }
    .desc{
      padding: 10px;
      font-size:12px;position: absolute;bottom: 0px;left: 0px;right:0px;max-height: 40%;    background:rgba(0,0,0,.4);
      text-align: center;
      color: white;
    }
    .floatBtn{
      position: fixed;
      bottom: 10px;
      right: 10px;
      z-index:100;
    }
    image[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
</style>
